14. Finding Examples of Expensive Layouts

INSTRUCTOR NOTE:

Link to Expensive Layouts forum discussion

Follow your instructors!

+Ilya Grigorik, @igrigorik

@cwpittman
If you want to follow along, Cameron will be analyzing NBC News in the solution video. He will be analyzing the performance of layout events as he resizes the browser window.
Note: layout can be triggered by device orientation change on mobile, a window resize, or any other action that modifies the content of the DOM - e.g. adding or removing content from the DOM tree, toggling CSSOM properties on a node, and so on!
Also, there's a good chance that NBC News has changed since this video was filmed. You might see something different than what Cameron sees.

• Use Ctrl+Shift+I on Windows, or Cmd+Opt+I on Mac to open the DevTools.
  
• Use Ctrl+Shift+R on Windows, or Cmd+Shift+R on Mac to reload the page and capture the timeline.
  PROTIP: In order to use the hard reload trick to capture the full trace, you have to load the page first, open Timeline in DevTools, start and stop recording, and then use the shortcuts described above to reload the page. Basically, open DevTools and hit the record button twice before doing a hard reload.
  Check out DevTools emulation docs for a detailed walkthrough of how to emulate a mobile device.